import { useState, useCallback } from "react";
import type { RadioChangeEvent } from "antd";
import { Radio, DatePicker, Space, Cascader, Input, Button } from "antd";

import locale from "antd/lib/date-picker/locale/zh_CN";

const { RangePicker } = DatePicker;

enum Status {
  All = "全部",
  Wait = "待就诊",
  Past = "已就诊",
  Cancel = "已取消",
}

interface Option {
  value: string;
  label: string;
  children?: Option[];
}

const options: Option[] = [
  {
    value: "内科",
    label: "内科",
    children: [
      {
        value: "消化内科",
        label: "消化内科",
      },
      {
        value: "血液内科",
        label: "血液内科",
      },
      {
        value: "肾内科",
        label: "肾内科",
      },
    ],
  },
  {
    value: "外科",
    label: "外科",
    children: [
      {
        value: "肠胃外科",
        label: "肠胃外科",
      },
      {
        value: "创伤外科",
        label: "创伤外科",
      },
    ],
  },
];

interface Props {
  onRadio: (value: Status) => void;
  onTime: (value: any) => void;
  onDepartment: (value: any) => void;
  onInput: (value: any) => void;
  isReset: (value: boolean) => void;
  onDelete: () => void;
}

export default function BookingHead(props: Props) {
  // 单选框选择的内容
  const [value, setValue] = useState(Status.All);

  // 日期选择框状态
  const [isDateCleared, setIsDateCleared] = useState<boolean>(false);

  // 层级选择
  const [department, setDepartment] = useState<string | undefined>(undefined);

  // 搜索框内容
  const [inputValue, setInputValue] = useState("");

  // 单选框选择
  const RadioChange = (e: RadioChangeEvent) => {
    setValue(e.target.value);
    props.onRadio(e.target.value);
  };

  // 时间选择
  const DateChange = useCallback(
    (value: any) => {
      const time = value.map((item: any) => item.$d.getTime());
      props.onTime(time);
    },
    [props]
  );

  // 科室选择
  const DepartmentChange = useCallback(
    (value: any) => {
      const val = value.join("-");
      setDepartment(val);
      props.onDepartment(val);
    },
    [props]
  );

  // 输入框
  // 输入框的值的变化
  const onInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setInputValue(e.target.value);
    },
    []
  );
  // 点击搜索按钮
  const SearchAction = useCallback(() => {
    props.onInput(inputValue);
  }, [props, inputValue]);

  // 重置
  const reset = useCallback(() => {
    props.isReset(true);
    // 重置单选框回到全部选项
    setValue(Status.All);

    // 清空时间选择框
    // 先设为 true,清空时间选择框
    setIsDateCleared(true);
    // 延迟更新为 false，再次选择时间，时间选择器就能显示
    setTimeout(() => {
      setIsDateCleared(false);
    }, 0);

    // 层级选择
    setDepartment(undefined);

    // 输入框
    setInputValue("");
  }, [props]);

  return (
    <header>
      {/* 单选框 */}
      <Radio.Group onChange={RadioChange} value={value}>
        <Radio value={Status.All}>全部</Radio>
        <Radio value={Status.Wait}>待就诊</Radio>
        <Radio value={Status.Past}>已就诊</Radio>
        <Radio value={Status.Cancel}>已取消</Radio>
      </Radio.Group>
      {/* 日期选择器 */}
      <Space direction="vertical" size={12}>
        <RangePicker
          placeholder={["请选择日期", "请选择日期"]}
          onChange={DateChange}
          locale={locale}
          value={isDateCleared ? null : undefined} // 根据状态值来清空或显示默认值
        />
      </Space>
      {/* 科室选择 */}
      <Cascader
        options={options}
        onChange={DepartmentChange}
        placeholder="请选择科室"
        style={{ margin: "0 20px" }}
        value={department ? department.split("-") : undefined}
      />
      {/* 搜索 */}
      <Input
        placeholder="请输入医生/病人姓名"
        style={{ width: "200px" }}
        onChange={onInputChange}
        value={inputValue}
      />
      <Button
        type="primary"
        style={{ marginLeft: "10px" }}
        onClick={SearchAction}
      >
        搜索
      </Button>
      <Button style={{ marginLeft: "10px" }} onClick={reset}>
        重置
      </Button>
      <Button style={{ marginLeft: "10px" }} onClick={props.onDelete}>
        批量删除
      </Button>
    </header>
  );
}
